<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .svg1 {
      background-color: pink;
      height: 400px;
      width: 500px;
    }
    svg {
      /* height: 200px;
      width: 200px; */
      background-color: rgb(176, 190, 197, 0.8);
    }
  </style>
</head>
<body>
  <!-- 基本 -->
  <svg class="svg1" width="10" height="10">
    <rect x="10" y="10" width="200" height="100" fill="red" />
    <circle cx="120" cy="320" r="120" stroke="blue" fill="none"></circle>
    <text x="100" y="100" font-size="30" fill="green">文字内容</text>
  </svg>

  <!-- svg元素当成图片引入 -->
  <img src="./circle.svg" alt="">
  <!-- 
    circle.svg文件代码
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  -->

  <svg width="100" height="100">
    <!-- 椭圆 -->
    <ellipse cx="50" cy="50" rx="50" ry="30" fill="rgb(139, 195, 74)"></ellipse>  
  </svg>
  <hr>
  <!-- 线 -->
  <svg width="200" height="200">
    <!-- 直线 -->
    <line x1="10" y1="10" x2="180" y2="180" stroke="gold"></line>  
    <!-- 虚线 stroke-dasharray="实线长度 空白长度" 偏移 stroke-dashoffset="3" 起点后移3个单位长度 -->
    <line x1="20" y1="0" x2="190" y2="170" stroke="gold" stroke-dasharray="5 10"></line> 
    <!-- 线宽 stroke-width="线宽" -->
    <line x1="0" y1="30" x2="150" y2="190" stroke="gold" stroke-width="5"></line> 
    <!-- 取消填充 绘制折线 -->
    <polyline points="0,100 50,25 50,75 100,0" fill="none" stroke="black"/>
  </svg>
  <hr>
  <!-- 多边形 -->
  <svg width="200" height="200">
    <!-- 默认填充 -->
    <polygon points="0,100 50,25 50,75 100,0" />
    <!-- 描边无填充 -->
     <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
  </svg>
  <hr>
  <!-- path标签 -->
  <svg width="200" height="200">
    <!-- M 移动到(moveTo) L绘制到(lineTo) 还有其它.. -->
    <path
      d="M 10,10
         L 60,170
         L 180,90
      "
      fill="rgb(66, 165, 245)"
    ></path>
  </svg>
  <svg width="200" height="200">
    <!-- H horizontal lineto（水平线）沿着水平方向到指定x坐标  大写绝对，小写相对-->
    <!-- V vertical lineto（垂直线）沿着垂直方向到指定y坐标 大写绝对，小写相对 -->
    <path
      d="M 10,10
         H 170
         V 180
         H 10
      "
      stroke="green"
      fill="none"
    ></path>
  </svg>
  <svg width="200" height="200">
    <!-- 二次贝塞尔曲线由三个点确定 
          起始点 (P0)：当前画笔位置 
          控制点 (P1)：Q命令的第一个参数
          终点 (P2)：Q命令的第二个参数
     -->
    <!-- 起始点(10,10), 控制点(100,200), 终点(190,10) -->
    <path
      d="M 10,10
         Q 100,200 190,10
      "
      stroke="green"
      fill="none"
    ></path>
  </svg>
  <hr>
  <!-- 渐变 -->
  <svg width="200" height="200">
    <defs>
      <!-- 可用的渐变效果 从上(0,0)到下(0,1) -> 方向根据这两点位置进行调整 蓝 绿 黄 -->
      <linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="rgb(66, 165, 245)"/>
        <stop offset="50%" stop-color="rgb(102, 187, 106)"/>
        <stop offset="100%" stop-color="rgb(255, 202, 40)"/>
      </linearGradient>
    </defs>
    <!-- fill中使用上面定义的渐变效果 -->
    <rect x="10" y="10" width="150" height="150" fill="url(#grad1)" />
  </svg>
  <hr>
  <!-- 动画效果 和css一样 -->
  <svg width="200" height="200">
    <rect class="rect" x="10" y="10" width="150" height="150" style="transition: all 1s;width: 50px; height: 50px;" />
  </svg>
  <button class="btn">过渡动画</button>
  <script>
    const btn = document.querySelector('.btn')
    const rect = document.querySelector('.rect')
    let toggled = false
    btn.addEventListener('click', () => {
      if (!toggled) {
        rect.style.fill = 'rgb(38, 166, 154)'
        rect.style.width = '150px'
        rect.style.height = '150px'
      } else {
        rect.style.fill = 'rgb(126, 87, 194)'
        rect.style.width = '50px'
        rect.style.height = '50px'
      }
      toggled = !toggled
    })
  </script>
</body>
</html>